<template>
  <!-- 文档搜索 -->
  <div class="search_box">
    <el-autocomplete
      ref="autocompleteRefs"
      placeholder="请输入内容"
      v-model="searchInput"
      class="input_search"
      :fetch-suggestions="querySearch"
      @select="handleSelectSearch"
    >
      <template #default="{ item }">
        <div class="content_box" v-infinite-scroll="querySearchLoad">
          <div class="searchInput_name">
            <svg-icon :icon-class="selectSvgIcons(item)" style="font-size: 20px; vertical-align: middle; margin-right: 6px"></svg-icon>
            <div>{{ item.realName }}{{ item.suffix ? `.${item.suffix}` : '' }}</div>
          </div>
          <div v-if="item.docContent" class="search_docContent" v-html="esSearchFunc(item.docContent)"></div>
          <div class="superiorsPath">
            <span>路径:{{ item.superiorsPath }}</span>
          </div>
        </div>
      </template>
    </el-autocomplete>

    <div class="page_tags">
      <el-tag class="tagclass" v-for="(item, index) in DefaultWordList" :key="index" @click="tagLabelClick(item)">{{ item }}</el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { debounce, throttle } from '@/utils/yuUtils.js';
import { ApiPerGetParentTreeNodeAll, ApiPerSearchInfo } from '@/api/personDoc/personDocApi';
import { defineProps, onMounted, ref, reactive } from 'vue';

const { proxy } = getCurrentInstance() as any;
const autocompleteRefs = ref();
const searchInput = ref('');
const searchStr = ref({
  page: 0,
  pageCount: '',
  list: []
} as any);

const searchlist = ref([]);

const searchLoading = ref(false); //用于搜索的滚动加载
const DefaultWordList = reactive(['总结', '报告', '计划', '提案', '合同', '数据']);

// es搜索出来的内容高亮方法
const esSearchFunc = (str: any) => {
  // 创建一个新的HTML元素，用来解析docContent
  let parser = new DOMParser();
  let doc = parser.parseFromString(str, 'text/html');
  // 找到所有 <em> 标签
  let emTags = doc.getElementsByTagName('em');

  // 遍历 <em> 标签并添加样式
  for (let i = 0; i < emTags.length; i++) {
    emTags[i].style.color = '#36a3f7'; // 改变文本颜色
    emTags[i].style.fontWeight = 'bold'; // 设置文字加粗
  }
  return doc.body.innerHTML;
};
// 点击标签
const tagLabelClick = (v: any) => {
  searchInput.value = v;
  autocompleteRefs.value.focus();
};

// 滚动加载
const querySearchLoad = debounce(() => {
  if (searchStr.value.page > searchStr.value.pageCount) {
    return;
  }

  if (!searchLoading.value) {
    searchLoading.value = true;

    ApiPerSearchInfo({
      type: 'personal',
      fileName: searchInput.value,
      page: searchStr.value.page,
      size: 10
    }).then((res: any) => {
      const filteredResults = res.data.rows;
      searchLoading.value = false;
      searchStr.value.page += 1;
      autocompleteRefs.value.suggestions = autocompleteRefs.value.suggestions.concat(filteredResults); //加载出来的数据放到suggestions中
      searchStr.value.pageCount = res.data.pageSize;
    });
  }
}, 300);

//icon图标
const selectSvgIcons = (v: any) => {
  return proxy.$yuUtils.selectSvgIcon(v);
};

const querySearch = (queryString: string, cb: (arg: any) => void) => {
  if (searchInput.value == '' && searchInput.value != undefined) {
    cb([]);
    return;
  }
  searchStr.value.page = 0;
  // 个人
  ApiPerSearchInfo({
    type: 'personal',
    fileName: searchInput.value,
    page: searchStr.value.page,
    size: 10
  }).then((res: any) => {
    searchStr.value.page += 1;
    searchStr.value.pageCount = res.length;

    const filteredResults = res.data.rows;

    searchlist.value = filteredResults;

    if (filteredResults.length == 0) {
      ElMessage.warning('未匹配到数据,请重新输入!');
    }

    cb(filteredResults);
  });
};

//数据源
// const querySearch = (queryString: string, cb: (arg: any) => void) => {
//   if (searchInput.value == '' && searchInput.value != undefined) {
//     cb([]);
//     return;
//   }
//   searchStr.value.page = 0;
//   //个人
//   ApiPersearchInfo({
//     title: searchInput.value,
//     moduleType: 'personal',
//     content: searchInput.value,
//     page: searchStr.value.page,
//     size: 10
//   }).then((res: any) => {
//     console.log(res, '搜索的值999999999999999');

//     searchStr.value.page += 1;
//     searchStr.value.pageCount = res.length;
//     searchStr.value.list = res;
//     if (res.length == 0) {
//       ElMessage.warning('未匹配到数据,请重新输入!');
//     }
//     // 调用 callback 返回建议列表的数据
//     cb(res);
//   });
// };

// const querySearch = (queryString: string, cb: (arg: any) => void) => {
//   if (searchInput.value == '' && searchInput.value != undefined) {
//     cb([]);
//     return;
//   }
//   searchStr.value.page = 0;
//   //个人
//   ApiPerSearchInfo({
//     type: 'personal',
//     fileName: searchInput.value,
//     page: searchStr.value.page,
//     size: 10
//   }).then((res: any) => {
//     console.log(res, '搜索的值999999999999999');

//     searchStr.value.page += 1;
//     searchStr.value.pageCount = res.length;
//     searchlist.value = res.data.rows;
//     if (res.length == 0) {
//       ElMessage.warning('未匹配到数据,请重新输入!');
//     }
//     // 调用 callback 返回建议列表的数据
//     cb(res.data.rows);
//   });
// };

//单击搜索
const handleSelectSearch = async (row: any) => {
  let params = {
    id: row.id,
    fileType: 0
  };

  const res = await ApiPerGetParentTreeNodeAll(params);
  let expandedKeys = res.data.map((item) => {
    let obj = {
      id: parseInt(item.id),
      label: item.realName
    };
    return obj;
  });

  sessionStorage.setItem('expandedKeys', JSON.stringify(expandedKeys));

  proxy.$router.push({ path: '/newUi/networkDisk/doc' });
};

onMounted(() => {});

defineExpose({
  //调用组件需要导出 v-model的变量
});
</script>

<style scoped lang="scss">
.box {
  display: flex;

  .page_left {
    height: calc(100vh - 365px);
    border: 1px solid red;
    width: 300px;
  }
}
/* 聊天消息样式 */
.ai-message .message-content-wrapper {
  display: flex;
  align-items: center;
}

.ai-message .AIavatar {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

/* 用户消息样式 */
.user-message .message-content {
  background-color: #f1f1f1;
  color: #333;
}

.ai-message .message-content {
  background-color: #e0f7fa;
  color: #00796b;
}

/* loading 状态的样式 */
.ai-message .message-content-wrapper .message-content {
  color: #999;
  font-style: italic;
}

.loading-text {
  color: #888;
  font-style: italic;
  animation: loading 1s infinite;
}

@keyframes loading {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

.page_File {
  z-index: 999;
  width: 800px;
  margin: 0 auto;
  background: #fff;
  overflow-x: auto;
  padding: 10px;
  height: 0; /* 默认高度为 0 */
  max-height: calc(100vh - 365px); /* 最大高度 */
  // max-height: calc(100vh - 365px); /* 最大高度 */
  transition: height 0.5s ease-in-out; /* 过渡效果 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  border-radius: 8px;

  /* 聊天容器 */
  .chat-container {
    display: flex;
    flex-direction: column;
    height: calc(82vh - 100px);
    /* 占用视口高度，减去头部/底部的空间 */
    background-color: #fff;
  }

  /* 聊天消息区域 */
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    /* 超过内容时滚动 */
    // margin-bottom: 10px;
    background-color: #fff;

    // box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    // padding: 10px;
    display: flex;
    flex-direction: column;
  }

  /* 用户消息的样式（右对齐） */
  .user-message {
    flex-direction: row-reverse;
    /* 用户消息右对齐 */
    justify-content: flex-end;
  }

  /* AI（或其他人的）消息样式（左对齐） */
  .ai-message {
    flex-direction: row;
    /* AI消息左对齐 */
    justify-content: flex-start;
  }

  .messageisUser {
    display: flex;
    // align-items: flex-start;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
    //max-width: 75%; /* 限制最大宽度 */
    // padding: 5px;
  }

  /* 消息内容样式 */
  .message-content {
    padding: 10px;
    border-radius: 10px;
    word-wrap: break-word;
    line-height: 1.4;
    max-width: 90%;
    /* 消息内容最大宽度 */
  }

  /* 用户的消息样式 */
  .message-content.user {
    background-color: #0084ff;
    color: white;
    align-self: flex-end;
    /* 用户消息靠右对齐 */
  }

  /* 其他用户或AI的消息样式 */
  .message-content.other {
    background-color: #e1e1e1;
    color: black;
    align-self: flex-start;
    /* AI消息靠左对齐 */
  }

  .avatarUser {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    background-color: #56abfb;
    margin-left: 8px;
    /* 为了给消息内容腾出空间 */
  }

  /* 每条消息 */
  .message-content-wrapper {
    display: flex;
    // align-items: flex-start;
    align-items: center;
    margin-bottom: 10px;
    //max-width: 75%; /* 限制最大宽度 */
    // padding: 5px;
  }

  .AIavatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    /* 为了给消息内容腾出空间 */
    border: 1px solid #56abfb;
    // background-color: #56abfb;
  }
}

/* 为了视觉效果可以在进入时加个渐变 */
.page_File-enter-active,
.page_File-leave-active {
  transition: height 0.5s ease-in-out;
}

.page_File-enter,
.page_File-leave-to {
  height: 0; /* 初始/结束高度 */
}

.icon_file {
  height: 100%;
  font-size: 49px;
  /* vertical-align: middle; */
  /* margin-right: 6px; */
  margin-left: -7px;
}

.file-list {
  width: 100%;
  width: 800px;
  max-height: 260px;
  padding-bottom: 12px;
  border-radius: 6px;
  background-color: #f3f5f9;
  overflow-y: auto;
  padding: 10px;

  .file-item {
    padding: 8px;
    width: calc((100% - 16px) / 3);
    position: relative;
    height: 60px;
    background: #fff;
    border-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
  }

  .file-box {
    display: flex;

    .file-name {
      margin-left: 10px;
      display: flex;
      flex-direction: column;

      .file_name {
        margin: 0px;
        font-family: 'PingFang SC', 'Microsoft YaHei', SimHei;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .file-size {
        margin: 0px;
        font-size: 13px;
        line-height: 24px;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .file-icon {
    width: 35px;
    height: 45px;
  }

  .fork-icon {
    position: absolute;
    cursor: pointer;
    font-size: 14px;
    top: -6px;
    right: -2px;
  }
}

.input-bot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  width: 800px;
  height: 100%;
}

.page_input {
  width: 100%;
  width: 800px;
  // max-width: 760px;
  // max-height: 150px;
  overflow-y: auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  .create_btn {
    margin-left: 8px;
    // margin-bottom: 8px;
  }

  .img2 {
    width: 16px;
    height: 16px;
  }

  .input_box {
    flex: 1;
    display: flex;
    align-items: flex-end;
    background-color: #ffffff;
    border-radius: 6px;
    // border: 1px solid #ffdeae;
    box-shadow: 0px 0px 8px 0px rgba(240, 143, 0, 0.06);
    overflow-y: auto;
    padding: 8px;
    margin: 0 auto;

    :deep(.el-textarea__inner) {
      box-shadow: none;
    }

    .btn_box {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }
  }

  .voice_box {
    height: 20px;
  }

  .sendBtn {
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    background-color: #f08f00;
    color: #ffffff;
    border-radius: 6px;
    // margin-left: 8px;
    font-size: 17px;
    cursor: pointer;
  }
}

.input_box_input {
  padding: 8px 10px;
  width: 100%;
  height: 100%;
  max-height: 73px;
  display: flex;
  border-radius: 10px;
  align-items: flex-end;
  background: #ffffff;
}

textarea::-webkit-scrollbar {
  width: 3px;
  /* 设置滚动条宽度 */
}

textarea::-webkit-scrollbar-thumb {
  background-color: rgb(66, 70, 86);
  /* 设置滚动条滑块的背景色 */
  border-radius: 50%;
  /* 设置滑块的圆角 */
}

.textarea {
  &:focus {
    outline: none;
  }
}

:deep(.textInput1) {
  width: 100%;
  height: 33px;

  &:deep(.el-textarea__inner) {
    border: 0;
    font-size: 15px;
  }
}

:deep(.el-textarea__inner) {
  box-shadow: none !important;
  border: 0;
}

.send_btn_box {
  display: flex;
  align-items: center;

  img {
    cursor: pointer;
  }
}

// .voice_box {
//   cursor: pointer;

//   .SpeakType3 {
//     width: 60px;
//     font-size: 12px;
//     color: #b3b0c3;
//   }
// }

.send_btn {
  width: 67px;
  padding: 8px 0;
  text-align: center;
  border-radius: 8px;
  background-color: #5e7afc;
  color: #ffffff;
  margin-left: 16px;
  cursor: pointer;
}

.search-active {
  font-weight: 600;
  color: #202020;
  background: #ffffff;
  box-shadow: 0 4px 16px 1px #0000000f;
}

.icon_size {
  font-weight: 600;
  margin-right: 6px;
}

.top {
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 8px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);

  .top-text {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 1.5px;
  }
}

.search_box {
  width: 100%;
}

:deep(.input_search) {
  border: none;
  width: 100%;
}

:deep(.el-input__wrapper) {
  border: none;
  padding: 0px;
  box-shadow: none;
  border-radius: 10px;
}

:deep(.el-input__inner:hover),
:deep(.el-input__inner:focus) {
  border: 2px solid #4a9dec;
  box-shadow: 0px 0px 0px 7px rgb(74, 157, 236, 20%);
  background-color: white;
}

:deep(.el-input__prefix) {
  top: 2px;
}

:deep(.el-input-group__prepend) {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #3d9cfb;
  border-color: #3d9cfb;
  color: #ffffff;
}

:deep(.el-input__inner) {
  // padding-top: 8px;
  // padding-bottom: 8px;
  // line-height: 40px;
  // height: 40px;
  // // border-radius: 16px;
  // border-top-right-radius: 20px;
  // border-bottom-right-radius: 20px;
  border: 2px solid transparent;
  outline: none;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 10px;
  transition: all 0.5s;
  // border: 2px solid #4a9dec;
  box-shadow: 0 0.4rem #dfd9d9;
  padding-left: 8px;
}

.searchInput_name {
  width: 100%;
  display: flex;
  align-items: center;

  div {
    // width: 10px;
    overflow: hidden;
    /*内容超出后隐藏*/
    text-overflow: ellipsis;
    /*超出内容显示为省略号*/
    white-space: nowrap;
    /*文本不进行换行*/
  }
}

.content_box {
  border-bottom: 1px solid #efefef;
}

.search_docContent {
  font-size: 12px;
  color: #939292;
  line-height: 22px;
}

.superiorsPath {
  font-size: 12px;
  color: #d6d6d6;
  line-height: 22px;
  text-align: right;
  overflow: hidden;
  /*内容超出后隐藏*/
  text-overflow: ellipsis;
  /*超出内容显示为省略号*/
  white-space: nowrap;
  /*文本不进行换行*/
}

.folder {
  position: relative;
  animation: float 1.8s infinite ease-in-out;
  transition: transform 0.3s ease;
  margin-bottom: 6px;
}

.folder:hover {
  transform: scale(1.05);
}

.folder .top {
  background: linear-gradient(135deg, #ff9a56, #ff6f56);
  width: 60px;
  height: 15px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.folder .bottom {
  background: linear-gradient(135deg, #ffe563, #ffc663);
  width: 100px;
  height: 70px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  border-radius: 0 10px 10px 10px;
  position: relative;
  top: -10px;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0px);
  }
}

.page_tags {
  margin-top: 15px;

  .tagclass {
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>
